@import "../../styles/common/config";
@import "../../styles/common/theme";

@mixin header-href {
    color: #6C6C6C;
    cursor: pointer;
    text-decoration: none;
}

@mixin header-href-hover {
    color: $theme-red;
}

.nav {
    font-size: 12px;
    padding: 12px 30px;
    border-bottom: 1px solid #ddd;

    background-color: #f5f5f5;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    [class~="welcome"]{
        color: #333;
        cursor: pointer;

        [class~="user"]{
            color: $theme-red;
        }
    }

    [class~="login"] {
        text-decoration: underline;
        color: $theme-red;
    }

    [class~="href-no-hover"] {
        @include header-href;
    }

    [class~="href"] {
        @include header-href;

        &:hover {
            @include header-href-hover;
        }

        &:visited {
            @include header-href;

            &:hover {
                @include header-href-hover;
            }
        }
    }

    [class~="divider"] {
        margin: 0 20px;
        border-inline-start: 1px solid rgba(5, 5, 5, 0.2) !important;
    }
}
